<template>
  <el-container>
    <el-header>商家管理系统</el-header>
    <el-container>
      <el-aside width="200px">
        <asideMenu></asideMenu>
      </el-aside>
      <el-main>
        <span class="welcome">欢迎你，<span class="sp">{{userName}}</span></span>
         <el-button type="text" @click="open">注销</el-button>
        <router-view></router-view>
      </el-main>
    </el-container>
    <el-footer>Author@Kerry</el-footer>
  </el-container>
</template>

<script>
import asideMenu from "../../components/Merchant/MerchantAside";
import axios from 'axios';
export default {
  components: { asideMenu },
  data(){
    return{
      userName:sessionStorage.getItem('userName')
    }
  },
  methods:{
    open() {
        this.$confirm(`此操作将退出${this.userName}, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '注销成功!'
          });
          sessionStorage.clear();
          this.$router.push({
            path:'/merchantRegister'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消注销'
          });          
        });
      }
  }
};
</script>

<style>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  /* text-align: center; */
  /* line-height: 200px; */
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}
body {
  margin: 0;
  padding: 0;
}
body > .el-container {
  height: 100vh;
}
.welcome{
  font-size: 16px;
}
.sp{
  color: red;
  margin-right: 20px;
}
</style>